<template>
  <div>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style"/>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 10px;">
      <i-col :md="24" :lg="10">
        <Card shadow>
          <chart-pie style="height: 300px;" :value="pieData" text="办理事项类型TOP5"></chart-pie>
        </Card>
      </i-col>
      <i-col :md="24" :lg="14">
        <Card style="height: 332px;">
          <p slot="title">
            <Icon type="md-chatbubbles" /> 我的待办
          </p>
          <Row v-for="item in todolist" v-bind:key="item.id">
            <Col span="24"><Icon type="md-checkbox-outline" style="color: #19be6b"/> {{item.text}}</Col>
            <Divider class="divider1"/>
            <!-- <Col span="8">{{itemoption.data}}</Col> -->
          </Row>
        </Card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 10px;">
      <i-col :md="24" :lg="12">
        <Card style="height: 300px;">
          <p slot="title">
            <Icon type="md-chatbubbles" /> 业务办理
          </p>
          <Row v-for="item in dolist" v-bind:key="item.id">
            <Col span="24"><Icon type="md-attach" style="color: #5cadff"/> {{item.text}}</Col>
            <Divider class="divider1"/>
          </Row>
        </Card>
      </i-col>
      <i-col :md="24" :lg="12">
        <Card style="height: 300px;">
          <p slot="title">
            <Icon type="md-chatbubbles" /> 通知公告
          </p>
          <Row v-for="item in noticelist" v-bind:key="item.id">
            <Col span="24"><Icon type="md-alert" style="color: #f00"/> {{item.text}}</Col>
            <Divider class="divider1"/>
          </Row>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar } from '_c/charts'
import Example from './example.vue'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    Example
  },
  data () {
    return {
      inforCardData: [
        { title: '临近超期', icon: 'ios-clock-outline', count: 1, color: '#ed3f14' },
        { title: '待预审', icon: 'md-list', count: 3, color: '#9A66E4' },
        { title: '待受理', icon: 'ios-cafe', count: 13, color: '#ff9900' },
        { title: '审批中', icon: 'ios-brush', count: 0, color: '#2d8cf0' },
        { title: '待办结', icon: 'md-chatbubbles', count: 2, color: '#E46CBB' },
        { title: '已办结', icon: 'md-checkmark', count: 7, color: '#19be6b' }
      ],
      pieData: [
        { value: 20, name: '民政' },
        { value: 13, name: '房产' },
        { value: 11, name: '卫生' },
        { value: 7, name: '残联' },
        { value: 6, name: '综治' }
      ],
      barData: {
        Mon: 13253,
        Tue: 34235,
        Wed: 26321,
        Thu: 12340,
        Fri: 24643,
        Sat: 1322,
        Sun: 1324
      },
      todolist: [
        { id: '1', text: '【办结】社区居民[张先生]参保', data: '2019-03-12' },
        { id: '2', text: '【办结】社区居民[李女士]参保', data: '2019-03-10' }
      ],
      dolist: [
        { id: '1', text: '低保，低保边缘用户出具证明', data: '2019-03-11' },
        { id: '2', text: '[王先生]社区居住证明', data: '2019-03-10' }
      ],
      noticelist: [
        { id: '1', text: '【公告】2019年3月12日暂停办理居住证明业务一天', data: '2019-03-11' }
      ]
    }
  },
  mounted () {
    //
  }
}
</script>

<style lang="less">
  .count-style{
    font-size: 50px;
  }
  .divider1 {
    margin: 5px 0px;
  }
</style>
